<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

// 实时报警数据
const warningList = ref([
  {
    id: 'WARN20230912001',
    time: '2023-09-12 14:32:15',
    vehicle: 'ZTZ-99主战坦克-001',
    component: '发动机系统',
    type: '温度异常',
    level: '高',
    description: '发动机温度超过阈值(95°C)，当前温度102°C',
    status: '未处理',
    handler: '-'
  },
  {
    id: 'WARN20230912002',
    time: '2023-09-12 14:28:33',
    vehicle: 'ZBD-04步兵战车-015',
    component: '传动系统',
    type: '压力异常',
    level: '中',
    description: '变速箱油压偏低，当前压力0.8MPa，低于标准值1.2MPa',
    status: '处理中',
    handler: '张工'
  },
  {
    id: 'WARN20230912003',
    time: '2023-09-12 14:25:17',
    vehicle: 'PLZ-05自行榴弹炮-032',
    component: '火控系统',
    type: '通信异常',
    level: '中',
    description: '火控计算机与观瞄设备通信中断',
    status: '未处理',
    handler: '-'
  },
  {
    id: 'WARN20230912004',
    time: '2023-09-12 14:22:45',
    vehicle: 'PGZ-07自行高炮-028',
    component: '雷达系统',
    type: '信号异常',
    level: '低',
    description: '雷达信号强度下降，当前信号强度-15dBm',
    status: '已处理',
    handler: '李工',
    resolvedTime: '2023-09-12 14:35:22'
  },
  {
    id: 'WARN20230912005',
    time: '2023-09-12 14:18:52',
    vehicle: 'ZTZ-99主战坦克-003',
    component: '悬挂系统',
    type: '震动异常',
    level: '高',
    description: '左侧负重轮震动频率异常，可能有部件松动',
    status: '未处理',
    handler: '-'
  }
])

// 报警级别颜色映射
const levelColorMap = {
  '高': '#ff4d4f',
  '中': '#faad14',
  '低': '#52c41a'
}

// 状态类型映射
const statusTypeMap = {
  '未处理': '',
  '处理中': 'warning',
  '已处理': 'success'
}

// 统计数据
const warningStats = ref({
  total: 24,
  high: 8,
  medium: 10,
  low: 6
})

// 图表实例
let warningChart = null
let levelChart = null

// 初始化图表
const initCharts = () => {
  // 报警趋势图
  const warningChartElement = document.getElementById('warning-trend-chart')
  if (warningChartElement) {
    warningChart = echarts.init(warningChartElement)
    updateWarningTrendChart()
  }
  
  // 报警级别分布图
  const levelChartElement = document.getElementById('warning-level-chart')
  if (levelChartElement) {
    levelChart = echarts.init(levelChartElement)
    updateLevelChart()
  }
}

// 更新报警趋势图
const updateWarningTrendChart = () => {
  if (!warningChart) return
  
  const option = {
    title: {
      text: '近24小时报警趋势',
      textStyle: {
        color: '#e4e8f0'
      }
    },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: '#000'
      },
      backgroundColor: 'rgba(255,255,255,0.9)'
    },
    legend: {
      data: ['高', '中', '低'],
      textStyle: {
        color: '#e4e8f0'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      axisLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      },
      axisLabel: {
        color: '#a0b1d0'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      },
      axisLabel: {
        color: '#a0b1d0'
      },
      splitLine: {
        lineStyle: {
          color: '#2a3a6a'
        }
      }
    },
    series: [
      {
        name: '高',
        type: 'line',
        stack: '总量',
        data: [2, 1, 3, 5, 4, 3, 2],
        itemStyle: { color: '#ff4d4f' },
        areaStyle: {}
      },
      {
        name: '中',
        type: 'line',
        stack: '总量',
        data: [3, 4, 2, 3, 5, 4, 3],
        itemStyle: { color: '#faad14' },
        areaStyle: {}
      },
      {
        name: '低',
        type: 'line',
        stack: '总量',
        data: [5, 6, 4, 5, 6, 7, 4],
        itemStyle: { color: '#52c41a' },
        areaStyle: {}
      }
    ]
  }
  
  warningChart.setOption(option)
}

// 更新报警级别分布图
const updateLevelChart = () => {
  if (!levelChart) return
  
  const option = {
    title: {
      text: '报警级别分布',
      left: 'center',
      textStyle: {
        color: '#e4e8f0'
      }
    },
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000'
      },
      backgroundColor: 'rgba(255,255,255,0.9)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#e4e8f0'
      }
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: warningStats.value.high, name: '高级别' },
          { value: warningStats.value.medium, name: '中级别' },
          { value: warningStats.value.low, name: '低级别' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          color: function(params) {
            const colors = ['#ff4d4f', '#faad14', '#52c41a']
            return colors[params.dataIndex]
          }
        }
      }
    ]
  }
  
  levelChart.setOption(option)
}

// 处理报警
const handleWarning = (warning) => {
  ElMessage.success(`已分配处理人员处理报警 ${warning.id}`)
  warning.status = '处理中'
  warning.handler = '当前用户'
}

// 初始化
onMounted(() => {
  initCharts()
})

// 组件卸载前清理
onBeforeUnmount(() => {
  if (warningChart) {
    warningChart.dispose()
  }
  if (levelChart) {
    levelChart.dispose()
  }
})

// 窗口大小变化时重置图表大小
window.addEventListener('resize', () => {
  if (warningChart) {
    warningChart.resize()
  }
  if (levelChart) {
    levelChart.resize()
  }
})
</script>

<template>
  <div class="warning-container">
    <!-- 顶部标题栏 -->
    <div class="warning-header">
      <div class="header-left">
        <h1><i class="el-icon-bell"></i> 特种车辆设备故障智能分析系统</h1>
        <p>实时监控车辆状态，及时发现并处理潜在故障风险</p>
      </div>
      <div class="header-right">
        <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <span>管理员</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="warning-content">
      <div class="page-header">
        <h2>实时报警监控</h2>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-header">
            <i class="el-icon-bell stat-icon"></i>
            <div class="stat-info">
              <div class="stat-number">{{ warningStats.total }}</div>
              <div class="stat-label">总报警数</div>
            </div>
          </div>
        </div>
        
        <div class="stat-card high">
          <div class="stat-header">
            <i class="el-icon-warning stat-icon"></i>
            <div class="stat-info">
              <div class="stat-number">{{ warningStats.high }}</div>
              <div class="stat-label">高级别报警</div>
            </div>
          </div>
        </div>
        
        <div class="stat-card medium">
          <div class="stat-header">
            <i class="el-icon-warning-outline stat-icon"></i>
            <div class="stat-info">
              <div class="stat-number">{{ warningStats.medium }}</div>
              <div class="stat-label">中级别报警</div>
            </div>
          </div>
        </div>
        
        <div class="stat-card low">
          <div class="stat-header">
            <i class="el-icon-info stat-icon"></i>
            <div class="stat-info">
              <div class="stat-number">{{ warningStats.low }}</div>
              <div class="stat-label">低级别报警</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-card">
          <div id="warning-trend-chart" style="height: 300px;"></div>
        </div>
        <div class="chart-card">
          <div id="warning-level-chart" style="height: 300px;"></div>
        </div>
      </div>

      <!-- 报警列表 -->
      <div class="warning-list-card">
        <div class="card-header">
          <h3><i class="el-icon-warning"></i> 实时报警列表</h3>
          <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
        </div>
        <el-table 
          :data="warningList" 
          style="width: 100%" 
          :row-class-name="({row}) => 'warning-row-' + row.level"
          class="warning-table"
        >
          <el-table-column prop="id" label="报警编号" width="150" />
          <el-table-column prop="time" label="报警时间" width="170" />
          <el-table-column prop="vehicle" label="车辆编号" width="150" />
          <el-table-column prop="component" label="故障部件" width="120" />
          <el-table-column prop="type" label="报警类型" width="120" />
          <el-table-column prop="level" label="报警级别" width="100">
            <template #default="scope">
              <el-tag :color="levelColorMap[scope.row.level]" style="color: white;">
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="报警描述" show-overflow-tooltip />
          <el-table-column prop="status" label="处理状态" width="100">
            <template #default="scope">
              <el-tag :type="statusTypeMap[scope.row.status]">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="handler" label="处理人" width="100" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button 
                size="small" 
                type="primary" 
                :disabled="scope.row.status !== '未处理'"
                @click="handleWarning(scope.row)">
                处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            layout="prev, pager, next"
            :total="100"
            :page-size="10"
            background
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.warning-container {
  background-color: #0f1c3c;
  color: #e4e8f0;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}

.warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(90deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.header-left h1 {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.header-left p {
  font-size: 14px;
  color: #a0b1d0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warning-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #e4e8f0;
}

.stats-container {
  display: flex;
  gap: 20px;
}

.stat-card {
  flex: 1;
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-card.high {
  border-left: 4px solid #ff4d4f;
}

.stat-card.medium {
  border-left: 4px solid #faad14;
}

.stat-card.low {
  border-left: 4px solid #52c41a;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 32px;
  opacity: 0.7;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #a0b1d0;
}

.charts-container {
  display: flex;
  gap: 20px;
}

.chart-card {
  flex: 1;
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.warning-list-card {
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #e4e8f0;
}

.warning-table {
  background-color: rgba(10, 26, 58, 0.5);
  border-radius: 8px;
}

.warning-table :deep(.el-table__header th) {
  background-color: #1a2a52;
  color: #e4e8f0;
}

.warning-table :deep(.el-table__row) {
  background-color: rgba(10, 26, 58, 0.3);
  color: #e4e8f0;
}

.warning-table :deep(.el-table__row:hover) {
  background-color: rgba(26, 42, 82, 0.7) !important;
}

.warning-row-高 {
  background-color: rgba(255, 77, 79, 0.1) !important;
}

.warning-row-中 {
  background-color: rgba(250, 173, 20, 0.1) !important;
}

.warning-row-低 {
  background-color: rgba(82, 196, 26, 0.1) !important;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .stats-container {
    flex-direction: column;
  }
  
  .charts-container {
    flex-direction: column;
  }
}
</style>